<!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h4 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-gray-800">第<?= $location["location_order"]?>号 <?= $location["name"]?>研学基地介绍</h4>
                    <p class="text-gray-600 mt-1"><?= $location["description"]?></p>
                    <input type="hidden" id="page_id" value="<?= $location['id'] ?>">
                </div>
            </div>

            <!-- 基地特点图片展示 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/shutangshan_1.jpg") ?>" alt="书堂山基地全景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/shutangshan_2.jpg") ?>" alt="研学活动场景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/shutangshan_3.jpg") ?>" alt="自然生态环境" class="w-full h-48 object-cover">
                </div>
            </div>

            <!-- 简介和图表左右分列 -->
            <div class="flex flex-col md:flex-row mt-8 mb-6">
                <!-- 简介 -->
                <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl w-full md:w-4/5">
                <h3 class="text-xl font-bold text-gray-800 mb-2">简介</h3>
                <div class="text-gray-600 space-y-4">
                    <p class="text-indent-8">&emsp;&emsp;书堂山欧阳询文化园劳动与实践教育营地（原泥爸爸场景育学园）融汇五千年国学文化和千年盛唐风采，打造“国学耕读”主题场景。</p>
                    <p class="text-indent-8">&emsp;&emsp;以书礼教育为主线、融汇八雅六艺，农耕实践，非遗拓展等多样化体验活动。</p>
                    <p class="text-indent-8">&emsp;&emsp;习书礼、练八雅、勤躬耕、拓六艺、知非遗，书礼齐贤、国艺启智、经学明志，一个耕读成长的朝圣地、一次陶冶心灵的研学行。</p>
                    <p class="text-indent-8">&emsp;&emsp;通过开放的综合实践课程，让教育真正归于唤醒、释放天性。</p>
                </div>
            </div>

                <!-- 图表 -->
                <div class="w-full md:w-1/3 p-6">
                    <canvas id="myChart"></canvas>
                </div>
            </div>

            <!-- 亮点内容 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">亮点内容</h3>
                <!-- 大书法家的秘密基地 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">1. 大书法家的秘密基地</h4>
                    <p class="text-gray-600">&emsp;&emsp;书堂山是唐代著名大书法家欧阳询的故乡。这里有“书堂八景”，如读书台址，是欧阳询小时候读书写字的地方；洗笔泉池，传说欧阳询每天练完字在此洗毛笔，把泉水都染黑了。小朋友们可以在此模仿欧阳询，拿起毛笔书写，感受书法的魅力。</p>
                </div>
                <!-- 会“变魔术”的光影秀 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">2. 会“变魔术”的光影秀</h4>
                    <p class="text-gray-600">&emsp;&emsp;夜晚的书堂山会有全国首个森林5D全媒体行浸式幻彩实景光影秀《花开书堂山·光影诗书画》。灯光如彩色小精灵在树林间舞动，音乐响起仿佛进入梦幻世界，古人吟诗高歌的画面近在眼前，让孩子们仿佛穿越到古代，跟随故事一起冒险。</p>
                </div>
                <!-- 池塘里的“运动健将” -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">3. 池塘里的“运动健将”</h4>
                    <p class="text-gray-600">&emsp;&emsp;乡里里手农业科技发展股份有限公司的池塘里，有会“跑步”的鱼生活在循环微流水“跑道”里。孩子们可以参观这个养殖基地，了解新型渔业生态养殖知识，还能亲手喂鱼。</p>
                </div>
                <!-- 甜甜的采摘大冒险 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">4. 甜甜的采摘大冒险</h4>
                    <p class="text-gray-600">&emsp;&emsp;田园之恋项目中有大片无花果果园。孩子们可以提着小篮子采摘无花果，品尝酸甜的果实，同时了解农作物的生长周期。</p>
                </div>
                <!-- 像小鸟一样飞翔 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">5. 像小鸟一样飞翔</h4>
                    <p class="text-gray-600">&emsp;&emsp;飞弘滑翔伞项目极具挑战性，孩子们可以像小鸟一样在空中翱翔，俯瞰书堂山的美丽风景，锻炼胆量。</p>
                </div>
                <!-- 超特别的特色项目 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">6. 超特别的特色项目</h4>
                    <p class="text-gray-600">&emsp;&emsp;孩子们可以在书堂山当一回“小小生态侦探”。这里曾因开采麻石山体受损，如今经大家努力又恢复了绿色。孩子们可以探索山林，寻找重新生长的植物，学习保护地球的知识，成为保护生态环境的小卫士。</p>
                </div>
            </div>

            <!-- 书堂山欧阳询文化产业园一日研学课程安排 -->
            
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">【书堂山欧阳询文化产业园一日研学课程安排】</h2>
    <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <colgroup>
                <col style="width: 12%;"> <!-- 时间列 -->
                <col style="width: 20%;"> <!-- 环节列 -->
                <col style="width: 68%;"> <!-- 环节介绍列 -->
            </colgroup>
            <thead>
                <tr class="bg-gray-50">
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">时间</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节介绍</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="4" class="border border-gray-300 py-3 px-4 text-center align-top">上午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">开营入园</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">团队融合，讲解活动注意事项，有序入园。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 font-medium">国学礼仪·拜师礼/成长礼</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">1. 了解古代礼仪在社交中的重要，学习国学常识；</p>
                        <p class="mb-2">2. 学会礼仪手势，了解其中的不同含义；</p>
                        <p>3. 感恩师长，礼拜圣贤，尊师重道。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 font-medium">非遗手工·扎染方巾/象形文字扇/解密孔明锁/皮影DIY</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">1. 发挥自己的想象创作能力，非遗手作体验并创意，鼓励创新探索；</p>
                        <p>2. 激发孩子对传统文化的兴趣和爱好。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 font-medium">劳动教育·菜园小能手</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">1. 分组在菜园里进行种植，浇水、施肥、除草。</p>
                        <p>2. 在亲近自然的过程中，体验劳动的乐趣和生活的美好。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">中午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">能量补给</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>学生享用自备简餐，注意用餐卫生、爱护环境</p>
                    </td>
                </tr>
                <tr>
                    <td rowspan="4" class="border border-gray-300 py-3 px-4 text-center align-top">下午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">八雅美学·故宫书画苑 书法体验</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">欣赏名帖名画《九成宫》《清明上河图》《千里江山图》，《兰亭序》等传世名作，提升对古典艺术的审美高度。</p>
                        <p class="mb-2">1. 从文字的构成，品味中华汉字文化的魅力，以及独特的中国精神。</p>
                        <p>2. 现场学习书写方式，书写汉字，在书法之乡体验书法的魅力。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 font-medium">无动力设备、游览书堂森林乐园等</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>森林探索：松果游艺、丛林探秘、空中绳网、追风滑梯等万平米森林乐园；在游戏活动中锻炼竞技精神，塑造竞技体能释放儿童天性。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 font-medium">投壶、射箭、神笔马良等六艺互动体验</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">1. 通过游戏培养孩子手眼协调能力，锻炼孩子的手臂及手指肌肉；</p>
                        <p>2. 加强团队协作与沟通能力，体验集体协作成就感。</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="border border-gray-300 py-3 px-4 font-medium text-center">愉快返程</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

            <!-- 结尾 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <p class="text-gray-600">小朋友们，书堂山的奇妙之旅已经准备好啦！这里有文化、有游乐、有特色，每一个项目都超好玩、超有趣！快来书堂山，一起开启这场超棒的研学冒险，收获满满的快乐和知识吧！</p>
            </div>
        </div>
    </div>

      <script>
        // 获取canvas元素
        const ctx = document.getElementById('myChart').getContext('2d');
        // 定义图表数据
        const data = {
          labels: ['知识性', '美观度', '体验感', '历史性', '安全性'],
          datasets: [{
            label: '基地能力',
            backgroundColor: 'rgba(153, 0, 51, 0.2)',
            borderColor: 'rgba(153, 0, 51, 1)',
            borderWidth: 2,
            data: [8, 7, 9, 9, 7] // 这里的数据可根据实际情况修改，代表各维度的评分
          }]
        };
        // 定义图表配置
        const options = {
          scale: {
            min: 1,             // 最小值设为1
            beginAtZero: true,
            steps: 10,
            stepValue: 1,
            max: 10
          },
          elements: {
            line: {
              // tension: 0.4
            }
          }
        };
        // 创建雷达图实例
        const myChart = new Chart(ctx, {
          type: 'radar',
          data: data,
          options: options
        });

        // 页面加载时记录开始时间
        let startTime = null;

        // 监听页面加载事件，记录开始时间
        window.addEventListener('load', function () {
            startTime = Date.now();
        });

        // 监听页面即将卸载事件，记录结束时间并发送停留时间到后端
        window.addEventListener('beforeunload', function () {
            recordPageStay();
        });

        function recordPageStay() {
            if (startTime === null) return; // 如果开始时间未记录，则不进行后续操作
            let endTime = Date.now();
            let duration = Math.floor((endTime - startTime) / 1000);

            fetch('/record-stay-activity/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ pageId: document.getElementById('page_id').value, duration: duration })
            })
           .then(response => response.json())
           .then(data => console.log(data));

            startTime = null; // 重置开始时间，避免重复计算
        }
      </script>